<template>
  <a-modal
    :open="open"
    width="1100px"
    title="病历模板"
    centered
    destroy-on-close
    :ok-button-props="{ disabled: !selectedSuit?.tcid }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex justify-between">
      <a-input v-model:value="searchkey" class="w-60" placeholder="套餐名称/助记码" allow-clear />
      <a-space>
        <a-button type="default" @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-space>
    </div>
    <div class="flex justify-between h-[540px] mt-2">
      <div class="w-60 bg-thin h-full flex flex-col items-center">
        <a-tabs v-model:active-key="suitType" centered>
          <a-tab-pane :key="0" tab="个人" />
          <a-tab-pane :key="1" tab="科室" />
          <a-tab-pane :key="2" tab="全院" />
          <a-tab-pane key="" tab="全部" />
        </a-tabs>
        <SuitList ref="suitListRef" preview :suit-type="suitType" :search-key="searchkey" :mrm-code="mrmCode" :template-type="4" @select="onSelectSuit" />
      </div>
      <div class="ml-4 flex-auto min-w-0">
        <div v-if="mrmCode === 'XYBL'" class="case-table my-2">
          <div v-for="item in WMItems" :key="item.value" class="case-item">
            <div class="label">{{ item.label }}</div>
            <div class="content h-10">
              {{ formState[item.value] }}
            </div>
          </div>
        </div>
        <!-- 中医 -->
        <div v-else-if="mrmCode === 'ZYBL'" class="case-table my-2">
          <div v-for="item in TCMItems" :key="item.value" class="case-item">
            <div class="label">{{ item.label }}</div>
            <div class="content h-10">
              {{ formState[item.value] }}
            </div>
          </div>
        </div>
        <!-- 眼科病历一 -->
        <div v-else class="case-table my-2">
          <div v-for="item in EYEItems" :key="item.value" class="case-item">
            <div class="label">{{ item.label }}</div>
            <div class="content h-10">
              {{ formState[item.value] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import SuitList from '@/views/out-doctor/components/SuitList'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  mrmCode: {
    type: String,
    default: null
  }
})
const searchkey = ref('')
const suitListRef = ref()
const suitType = ref(0)
const selectedSuit = ref(null)
const params = computed(() => {
  return {
    tcid: selectedSuit.value?.tcid,
    zjm: searchkey.value
  }
})
const formState = ref({})
const { getData } = useFetch({
  url: '/outp/template/getOutpEMPTemplate',
  params,
  onSuccess: (data) => {
    formState.value = data || {}
  }
})
const WMItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '体格检查', value: 'bcTgjc' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '初步诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '其他诊断', value: 'bcQtzdZdmc', code: 'bcQtzdZddm' },
  { label: '注意事项', value: 'bcZysx' },
  { label: '处置', value: 'bcCz' }
])
const TCMItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '舌质', value: 'zybcSz' },
  { label: '舌苔', value: 'zybcSt' },
  { label: '脉象', value: 'zybcMx' },
  { label: '阳性体征', value: 'zybcYxtz' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '辩证施治', value: 'zybcBzsz' },
  { label: '临床诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '中医诊断', value: 'zybcZyzdZdmc', code: 'zybcZyzdZddm' },
  { label: '中医证名', value: 'zybcZyzxMc', code: 'zybcZyzxDm' }
])
const EYEItems = ref([
  { label: '主诉', value: 'bcZs' },
  { label: '现病史', value: 'bcXbs' },
  { label: '既往史', value: 'bcJws' },
  { label: '个人史', value: 'bcGrs' },
  { label: '家族史', value: 'bcJzs' },
  { label: '过敏史', value: 'bcGms' },
  { label: '眼部检查', value: 'bcYbjc' },
  { label: '辅助检查', value: 'bcFzjc' },
  { label: '初步诊断', value: 'bcLczdZdmc', code: 'bcLczdZddm' },
  { label: '其他诊断', value: 'bcQtzdZdmc', code: 'bcQtzdZddm' },
  { label: '处理意见', value: 'bcCl' }
  // { label: '交待', value: 'bcJd' }
])
const onCancel = () => {
  suitType.value = 0
  searchkey.value = ''
  emit('update:open', false)
}
const onSelectSuit = (select) => {
  selectedSuit.value = select
  select?.tcid && getData()
}
watch(
  () => props.open,
  (val) => {
    !val && onCancel()
  }
)
const onSearch = () => {
  suitListRef.value.getData()
}

const onReset = () => {
  suitType.value = 0
  searchkey.value = ''
  nextTick(() => suitListRef.value.getData())
}
const onOk = async () => {
  const list = {
    ...formState.value,
    tcBzdj: selectedSuit.value?.tcPrice,
    isSuit: true,
    id: null
  }
  emit('success', list)
  onCancel()
}
</script>
<style lang="less" scoped>
.case-table {
  --border-color: rgba(125, 125, 125, 0.16);
  border: 1px solid var(--border-color);
  .case-item {
    display: flex;
    .label {
      display: flex;
      align-items: center;
      width: 120px;
      padding: 8px 16px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }
    .content {
      flex: 1;
      padding: 8px 16px;
      border-bottom: 1px solid var(--border-color);
    }
    &:last-child {
      .content,
      .label {
        align-items: flex-start;
        border-bottom: none;
      }
    }
  }
}
</style>
